<!-- 代理商资料审核 -->
<template>
    <div>
        <!-- 按钮 -->
        <el-button style="margin:10px" type="primary" icon="el-icon-refresh-right" circle
            @click="refreshList"></el-button>
        <el-button type="primary" icon="el-icon-plus" style="margin:10px"
            @click="dialogFormVisibleDL = true">添加代理商</el-button>
        <el-input placeholder="请输入搜索内容在点击搜索" v-model="searchText" style="width:300px;background-color: #fff;">
            <el-button slot="append" icon="el-icon-search" @click="getAllUserDetailProcessByTimeAsc"></el-button>
        </el-input>
        <el-button style="margin:10px" @click="sendMsg">发通知</el-button>
        <!-- <el-button style="margin:10px" @click="allPassUserDetailProcess">一键审核</el-button> -->
        <!--    <el-input placeholder="请输入搜索内容在点击搜索" v-model="searchText" style="width:300px;background-color: #fff;">
        <el-button slot="append" icon="el-icon-search" @click="getAllUserDynamicListByTimeDesc"></el-button>
      </el-input>
      <el-button style="margin:10px" @click="reSetting">重置</el-button> -->
        <!-- 表格
        data 展示数据 —— 数组类型
      -->
        <el-table style="width: 100%;" border :data="list" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" align="center">
            </el-table-column>
            <el-table-column prop="advertisementUserId" label="代理商id" width="80" align="center">
            </el-table-column>
            <el-table-column prop="name" label="代理名称" width="100" align="center">
            </el-table-column>
            <el-table-column label="代理级别" align="center">
                <template slot-scope="{ row, $index }">
                    <div>{{ row.level == 1 ? '市级代理' : '区县级代理' }}</div>
                </template>
            </el-table-column>
            <el-table-column prop="addressDetail" label="详细地址" align="center">
            </el-table-column>
            <el-table-column prop="city" label="代理城市" align="center">
            </el-table-column>
            <el-table-column prop="balance" label="可提现余额" align="center">
            </el-table-column>
            <el-table-column prop="contactName" label="联系人名称" align="center">
            </el-table-column>
            <el-table-column prop="contactPhone" label="联系电话" align="center">
            </el-table-column>
            <el-table-column prop="contactEmail" label="邮箱" align="center">
            </el-table-column>
            <el-table-column label="营业执照" align="center">
                <template slot-scope="{ row, $index }">
                    <el-image style="width: 40px; height: 40px; margin-right: 5px;" :src="$staticURL + row.licenseUrl"
                        v-if="row.licenseUrl" :preview-src-list="[$staticURL + row.licenseUrl]">
                    </el-image>
                </template>
            </el-table-column>
            <el-table-column label="身份证正面" align="center">
                <template slot-scope="{ row, $index }">
                    <el-image style="width: 40px; height: 40px; margin-right: 5px;" :src="$staticURL + row.idcardFront"
                        v-if="row.idcardFront" :preview-src-list="[$staticURL + row.idcardFront]">
                    </el-image>
                </template>
            </el-table-column>
            <el-table-column label="身份证反面" align="center">
                <template slot-scope="{ row, $index }">
                    <el-image style="width: 40px; height: 40px; margin-right: 5px;" :src="$staticURL + row.idcardBack"
                        v-if="row.idcardBack" :preview-src-list="[$staticURL + row.idcardBack]">
                    </el-image>
                </template>
            </el-table-column>
            <!-- <el-table-column prop="updateTime" label="上传时间" align="center" width="100">
        </el-table-column> -->
            <!-- <el-table-column label="审核结果" align="center" width="100"
          :filters="[{ text: '审核驳回', value: '-1' }, { text: '未审核', value: '0' }, { text: '审核通过', value: '1' }]"
          :filter-method="filterTag" filter-placement="bottom-end">
          <template slot-scope="{ row, $index }">
            <p v-if="row.auditStatus == -1">审核驳回</p>
            <p v-else-if="row.auditStatus == 0">未审核</p>
            <p v-else>审核通过</p>
          </template>
        </el-table-column> -->
            <!-- <el-table-column label="驳回原因" align="center">
          <template slot-scope="{ row, $index }">
            <p v-if="row.auditStatus == -1">{{ row.auditResult }}</p>
          </template>
        </el-table-column> -->
            <el-table-column label="操作" width="220" align="center">
                <!-- <template slot-scope="{ row, $index }" v-if="row.auditStatus == 0">
            <el-popconfirm title="是否通过？" icon="el-icon-info" icon-color="red" @confirm="passUserDetailProcess(row.id)">
              <el-tooltip content="通过" placement="top" slot="reference">
                <el-button type="success" icon="el-icon-check"></el-button>
              </el-tooltip>
            </el-popconfirm>
            <el-popconfirm style="margin-left:10px" title="是否驳回？" icon="el-icon-info" icon-color="red"
              @confirm="rejectUserDetailProcess(row.id)">
              <el-tooltip content="驳回" placement="top" slot="reference">
                <el-button type="danger" icon="el-icon-close"></el-button>
              </el-tooltip>
            </el-popconfirm>
          </template> -->

                <template slot-scope="{ row, $index }">

                    <!-- <el-tooltip content="发布任务" placement="top">
              <el-button type="primary" icon="el-icon-s-promotion" @click="dialogFormVisible = true"></el-button>
            </el-tooltip> -->


                    <el-tooltip content="设置比例" placement="top">
                        <el-button type="primary" icon="el-icon-edit" @click="dialogFormVisible2 = true, form = row"
                            style="margin-right: 10px;"></el-button>
                    </el-tooltip>
                    <el-dialog title="修改代理商信息" :visible.sync="dialogFormVisible2">
                        <template slot-scope="{ row, $index }">

                            <div>
                                <el-form ref="form" class="form" :model="form" label-width="80px"
                                    label-position='right'>
                                    <el-form-item label="详细地址" label-width="auto">
                                        <el-input v-model="form.addressDetail"></el-input>
                                    </el-form-item>
                                    <el-form-item label="分销用户发布广告佣金比例" label-width="auto">
                                        <el-input v-model="form.advertisementRate"></el-input>
                                    </el-form-item>
                                    <el-form-item label="广告商户id" label-width="auto">
                                        <el-input title="不可修改" :disabled="true"
                                            v-model="form.advertisementUserId"></el-input>
                                    </el-form-item>
                                    <!-- <el-form-item label="代理商头像" label-width="auto">
              <el-input v-model="form.avatar"></el-input>
            </el-form-item> -->
                                    <el-form-item label="分销用户购物佣金比例" label-width="auto">
                                        <el-input v-model="form.buyCommodityRate"></el-input>
                                    </el-form-item>
                                    <el-form-item label="所在城市" label-width="auto">
                                        <el-input v-model="form.city"></el-input>
                                    </el-form-item>
                                    <el-form-item label="联系人邮箱" label-width="auto">
                                        <el-input v-model="form.contactEmail"></el-input>
                                    </el-form-item>
                                    <el-form-item label="联系人名称" label-width="auto">
                                        <el-input v-model="form.contactName"></el-input>
                                    </el-form-item>
                                    <el-form-item label="联系人电话" label-width="auto">
                                        <el-input v-model="form.contactPhone"></el-input>
                                    </el-form-item>
                                    <el-form-item label="分销用户音视频，打赏，送礼等佣金比例" label-width="auto">
                                        <el-input v-model="form.distributionRate"></el-input>
                                    </el-form-item>
                                    <!-- <el-form-item label="身份证反面" label-width="auto">
                      <el-image style="width: 40px; height: 40px; margin-right: 5px;" :src="$staticURL + form.idcardBack"
                        :preview-src-list="[$staticURL + form.idcardBack]">
                      </el-image>
                      
                    </el-form-item> -->
                                    <!-- <el-form-item label="身份证正面" label-width="auto">
                       
                      <el-image style="width: 40px; height: 40px; margin-right: 5px;" :src="$staticURL + form.idcardFront"
                        :preview-src-list="[$staticURL + form.idcardFront]">
                      </el-image>
                      
                    </el-form-item> -->
                                    <!-- <el-form-item label="营业执照地址" label-width="auto">
  
                      <el-image style="width: 40px; height: 40px; margin-right: 5px;" :src="$staticURL + form.licenseUrl"
                        :preview-src-list="[$staticURL + form.licenseUrl]">
                      </el-image>
  
                    </el-form-item> -->
                                    <el-form-item label="代理商名称" label-width="auto">
                                        <el-input v-model="form.name"></el-input>
                                    </el-form-item>

                                    <el-form-item>
                                        <el-button type="primary" @click="onSubmit(row)">立即设置</el-button>

                                    </el-form-item>
                                </el-form>
                            </div>



                        </template>
                    </el-dialog>

                    <el-tooltip content="违规惩罚" placement="top">
                        <el-button type="danger" icon="el-icon-warning"
                            @click="dialogFormVisible1 = true, penaltyFrom.adUserId = row.advertisementUserId"
                            style="margin-right: 10px;"></el-button>
                    </el-tooltip>

                    <el-popconfirm v-if="row.isUse == 0" title="是否启用？" icon="el-icon-info" icon-color="red"
                        @confirm="enableAdvertisementUser(row.advertisementUserId)">
                        <el-tooltip content="启用" placement="top" slot="reference">
                            <el-button type="success" icon="el-icon-video-play"></el-button>
                        </el-tooltip>
                    </el-popconfirm>
                    <el-popconfirm v-if="row.isUse == 1" title="是否停用？" icon="el-icon-info" icon-color="red"
                        @confirm="stopAdvertisementUser(row.advertisementUserId)">
                        <el-tooltip content="停用" placement="top" slot="reference">
                            <el-button type="warning" icon="el-icon-video-pause"></el-button>
                        </el-tooltip>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>

        <!-- 对话框  -->
        <el-dialog title="添加代理商" :visible.sync="dialogFormVisibleDL">
            <el-form style="width:80%" :model="tmForm" :rules="rules" ref="ruleForm">
                <el-form-item label="用户名" label-width="150px" prop="userName">
                    <el-input autocomplete="off" v-model="tmForm.userName"></el-input>
                </el-form-item>
                <el-form-item label="密码" label-width="150px" prop="password">
                    <el-input autocomplete="off" type="password" v-model="tmForm.password"></el-input>
                </el-form-item>
                <el-form-item label="当月充值金额指标" label-width="150px" required prop="monthRechargeMoney">
                    <el-input autocomplete="off" v-model="tmForm.monthRechargeMoney"></el-input>
                </el-form-item>
                <el-form-item label="奖励金额" label-width="150px" required prop="rewardMoney">
                    <el-input autocomplete="off" v-model="tmForm.rewardMoney"></el-input>
                </el-form-item>
                <el-form-item label="广告折扣" label-width="150px" required prop="rate">
                    <el-input autocomplete="off" v-model="tmForm.rate" placeholder="小数点格式，不大于1"></el-input>
                </el-form-item>
                <el-form-item label="用户消费返比例" label-width="150px" required prop="distributionRate">
                    <el-input autocomplete="off" v-model="tmForm.distributionRate" placeholder="小数点格式，不大于1"></el-input>
                </el-form-item>
                <el-form-item label="应交押金金额" label-width="150px" required prop="payableDepositMoney">
                    <el-input autocomplete="off" v-model="tmForm.payableDepositMoney"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisibleDL = false">取 消</el-button>
                <el-button type="primary" @click="getRegister">确 定</el-button>
            </div>
        </el-dialog>

        <!-- 发布任务 -->
        <el-dialog title="任务发布" :visible.sync="dialogFormVisible">
            <el-form style="width:80%" :model="list">
                <el-form-item label="达成季度任务KP1" label-width="150px" prop="questionContent">
                    <el-input autocomplete="off" v-model="list.questionContent"></el-input>
                </el-form-item>
                <el-form-item label="奖励" label-width="150px" prop="answerContent">
                    <el-input autocomplete="off" v-model="list.answerContent"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary">提交</el-button>
            </div>
        </el-dialog>

        <!-- 违规惩罚 -->
        <el-dialog title="违规惩罚" :visible.sync="dialogFormVisible1">
            <el-form style="width:80%" :model="penaltyFrom" :rules="penaltyRules" ref="penaltyFrom">
                <el-form-item label="处罚理由明细" label-width="150px" prop="reason">
                    <el-input autocomplete="off" v-model="penaltyFrom.reason"></el-input>
                </el-form-item>
                <el-form-item label="广告链接" label-width="150px" prop="adLink">
                    <el-input autocomplete="off" v-model="penaltyFrom.adLink"></el-input>
                </el-form-item>
                <el-form-item label="处罚金额" label-width="150px" prop="money">
                    <el-input autocomplete="off" v-model.number="penaltyFrom.money"></el-input>
                </el-form-item>
                <el-form-item label='违规截图' label-width="150px" required>
                    <el-upload class="avatar-uploader" action='#' :on-preview="handlePictureCardPreview"
                        :on-change="uploadFile" :auto-upload="false" :show-file-list='false'>

                        <i v-if="imageUrl1" class="el-icon-circle-close " @click.stop="handleRemove1"></i>
                        <i v-if="imageUrl1" class="el-icon-zoom-in " @click.stop="handlePictureCardPreview"></i>


                        <img v-if='imageUrl1' :src='imageUrl1' class='avatar' :show-file-list='false'>
                        <i v-else class='el-icon-plus avatar-uploader-icon'></i>
                    </el-upload>
                    <el-dialog :visible.sync="dialogVisible" title="预览" width="800" append-to-body>
                        <img :src="dialogImageUrl" style="display: block; max-width: 100%; margin: 0 auto" />
                    </el-dialog>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible1 = false">取 消</el-button>
                <el-button type="primary" @click="aa">提交</el-button>
            </div>
        </el-dialog>


        <!-- 分页 -->
        <el-pagination style="margin-top:20px;text-align:center" @size-change="handle - sizeChange"
            @current-change="handleCurrentChange" :current-page="pageNumber" :page-sizes="[10, 50, 100]"
            :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
    </div>
</template>

<script>
import {
    MessageBox,
    Message
} from 'element-ui'
import {
    getToken
} from '@/utils/auth'
export default {
    name: 'toExamine',
    mounted() {
        //获取列表数据方法
        this.getAllUserDetailProcessByTimeAsc()
    },
    data() {
        return {
            form: {

            },
            dialogFormVisible2: false,
            percentageFrom: {},

            tmForm: {
                roleId: 9, //广告代理商id
            },
            // 表单验证
            rules: {
                userName: [{
                    required: true,
                    message: '请输入用户名',
                    trigger: 'blur'
                }],
                password: [{
                    required: true,
                    message: '请输入密码',
                    trigger: 'blur'
                }],
                monthRechargeMoney: [{
                    required: true,
                    message: '请输入当月充值金额指标',
                    trigger: 'blur'
                }],
                distributionRate: [{
                    required: true,
                    message: '请输入用户消费返比例',
                    trigger: 'blur'
                }],
                rate: [{
                    required: true,
                    message: '请输入广告折扣',
                    trigger: 'blur'
                }],
                rewardMoney: [{
                    required: true,
                    message: '请输入奖励金额',
                    trigger: 'blur'
                }],
                payableDepositMoney: [{
                    required: true,
                    message: '请输入应交押金金额',
                    trigger: 'blur'
                }],
            },
            imageUrl: "",
            penaltyRules: {
                adLink: [{
                    required: true,
                    message: '请输入广告链接',
                    trigger: 'blur'
                }],
                reason: [{
                    required: true,
                    message: '请输入处罚原因',
                    trigger: 'blur'
                }],
                money: [{
                    required: true,
                    message: '请输入处罚金额',
                    trigger: 'blur'
                }]
            },
            formData: '',
            dialogFormVisibleDL: false,
            dialogImageUrl: '',
            dialogVisible: false,
            imageUrl1: '',
            dialogFormVisible: false,
            list: {},
            dialogFormVisible1: false,
            list1: {},
            //页码
            pageNumber: 1,
            //每页数量
            pageSize: 10,
            //总条数
            total: 0,
            //列表数据
            list: [],
            ids: [],
            //搜索
            searchText: '',
            evaluatePictureList: [],
            tmFrom: {
                adUserIds: "",
                content: "",
                isTop: "",
                linkType: "",
                linkUrl: "",
                receiveType: 2,
                sexType: "",
            },
            penaltyFrom: {
                adLink: "",
                adUserId: 0,
                money: 0,
                picUrl: "",
                reason: ""
            }
        }
    },
    methods: {
        async onSubmit(advertisementUserId) {

            console.log(advertisementUserId, 'DAY');
            let res = await this.$API.members.updateAdvertisementUserMes(this.form)
            console.log(res, '修改');
            if (res.code == 200) {
                this.$message("修改ok")
            }
            this.dialogFormVisible2 = false
        },
        async addAdvertisementUserPenalty() {
            let res = await this.$API.members.addAdvertisementUserPenalty()
            console.log(res)
        },
        async sendMsg() {
            if (!this.tmFrom.adUserIds) {
                this.$message('请先选择代理商')
                return;
            }
            this.tmFrom.content = prompt('通知内容：');
            if (this.tmFrom.content != null && this.tmFrom.content != "") {
                let res = await this.$API.system.addNotificationManagement(this.tmFrom);
            }
        },
        // 添加代理商
        getRegister() {
            this.$refs.ruleForm.validate(async (valid) => {
                if (valid) {
                    console.log('添加人员', this.tmForm)
                    // if (this.tmForm.monthRechargeMoney == '' || this.tmForm.rate == '' || this.tmForm.rewardMoney == '') {
                    //   this.$message.info("请填写相关信息");
                    //   return;
                    // }
                    let res1 = await this.$API.members.addAdvertisementUser(this.tmForm
                        // {
                        //   monthRechargeMoney: this.tmForm.monthRechargeMoney,
                        //   password: this.tmForm.password,
                        //   rate: this.tmForm.rate,
                        //   rewardMoney: this.tmForm.rewardMoney,
                        //   userName: this.tmForm.userName
                        // }
                    );
                    console.log('广告商注册', res1)
                    if (res1.code == 200) {
                        this.$message.success('广告商注册成功')
                        this.getAllUserDetailProcessByTimeAsc()
                    } else {
                        this.$message(res1.msg)
                    }
                    this.dialogFormVisibleDL = false;
                }
            })
        },


        uploadFile(item) {
            console.log(item);
            let formData = new FormData();
            let file = item.raw;
            // this.file = item.raw;
            this.imageUrl1 = URL.createObjectURL(file);
            formData.append("image", file);
            this.formData = formData
            console.log(file, "216")
        },
        // 删除只需清空imageUrl1即可
        handleRemove1(file, fileList) {
            // console.log(file, fileList);
            this.imageUrl1 = "";
        },
        // 预览
        handlePictureCardPreview(file) {
            this.dialogImageUrl = this.imageUrl1;
            this.dialogVisible = true;
        },
        aa() {


            this.$refs.penaltyFrom.validate((valid) => {
                if (valid) {
                    if (!this.formData) {
                        this.$message('请上传违规截图')
                        return false;
                    }
                    this.$axios({
                        method: "post",
                        url: "https://api.yushiai.com.cn/biz/uploadImgage",
                        data: this.formData,
                        headers: {
                            'session_token': getToken(),
                            'Content-Type': 'multipart/form-data; boundary=----WebKitFormBoundaryLOZf2MbOw2wkMpjv'
                        },
                    }).then(async res => {
                        // console.log(res.data)
                        if (res.data.code == 200) {
                            // console.log(res.data.data.imgageUrl)
                            this.penaltyFrom.picUrl = res.data.data.imgageUrl
                            console.log(this.penaltyFrom)
                            let res1 = await this.$API.members.addAdvertisementUserPenalty(this.penaltyFrom)
                            if (res1.code == 200) {
                                this.dialogFormVisible1 = false;
                                this.$message.success('处罚成功')
                            } else {
                                this.$message(res1.code)
                            }
                        }
                    })

                } else {
                    console.log('error submit!!');
                    return false;
                }
            })

        },

        async enableAdvertisementUser(advertisementUserId) {
            let res = await this.$API.members.enableAdvertisementUser({
                advertisementUserId,
            })
            this.getAllUserDetailProcessByTimeAsc()
        },

        async stopAdvertisementUser(advertisementUserId) {
            let res = await this.$API.members.stopAdvertisementUser({
                advertisementUserId,
            })
            this.getAllUserDetailProcessByTimeAsc()
        },

        handleSelectionChange(val) {
            // console.log(val)
            this.tmFrom.adUserIds = val.map((item, index) => {
                return item.userId;
            }).join(",");
            // console.log(this.ids)

        },
        // 点击评价图片，大图预览多张图片
        clickevaluatePicture(row) {
            var srclist = []
            for (const imgArr of row.album) {
                // 把数据库传来的图片放进数组里
                srclist.push('https://www.yushiai.com.cn/' + imgArr)
            }
            this.evaluatePictureList = srclist // 赋值
            // console.log(this.evaluatePictureList)
        },
        refreshList() {
            this.getAllUserDetailProcessByTimeAsc()
        },
        async getAllUserDetailProcessByTimeAsc() {
            let res = await this.$API.members.advertisementUserList({
                pageNumber: this.pageNumber,
                pageSize: this.pageSize,
                searchText: this.searchText
            })
            console.log(res)
            this.total = res.data.sumLine;
            // const arr = [];
            // for (let i = 0; i < res.data.rows.length; i++) {
            //   arr.push(res.data.rows[i].album.split(","))
            //   res.data.rows[i].album = arr[i]
            // }
            // console.log(arr)
            this.list = res.data.rows;
            // this.form = this.list
            console.log('list', this.list)
        },
        // reSetting() {
        //   this.searchText = '';
        //   this.getAllUserDetailProcessByTimeAsc();
        // },
        async allPassUserDetailProcess() {
            if (this.ids == '') {
                Message({
                    message: '请选择用户',
                    type: 'error',
                    duration: 5 * 1000
                })
                return false;
            }
            let res = await this.$API.audit.passUserDetailProcess({
                // userDetailProcessId: id,
                userDetailProcessIds: this.ids,
                auditResult: '审核通过'
            })
            this.getAllUserDetailProcessByTimeAsc()
        },
        async passUserDetailProcess(id) {
            let res = await this.$API.audit.passUserDetailProcess({
                userDetailProcessIds: id,
                auditResult: '审核通过'
            })
            this.getAllUserDetailProcessByTimeAsc()
        },
        async rejectUserDetailProcess(id) {
            let auditResult = prompt('驳回原因：');
            if (auditResult != null && auditResult != "") {
                let res = await this.$API.audit.rejectUserDetailProcess({
                    userDetailProcessId: id,
                    auditResult: auditResult
                })
                this.getAllUserDetailProcessByTimeAsc()
            }
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.pageSize = val
            this.getAllUserDetailProcessByTimeAsc()
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.pageNumber = val
            this.getAllUserDetailProcessByTimeAsc()
        },
        filterTag(value, row) {
            console.log(value, row)
            return row.auditStatus == value;
        },
        filterHandler(value, row, column) {
            // const property = column['property'];
            // return row[property] === value;
        }
    }
}
</script>

<style scoped lang="scss">
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>